<template>
  <div class="station-overview">
    <h2>站点管理系统</h2>
    
    <!-- 功能卡片区域 -->
    <el-row :gutter="20" class="card-row">
      <el-col :span="6" v-for="(item, index) in menuItems" :key="index">
        <el-card class="menu-card" shadow="hover" @click.native="handleNavigation(item.path)">
          <div class="card-content">
            <i :class="item.icon"></i>
            <span>{{ item.title }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 站点信息展示区域 -->
    <el-card class="station-info">
      <div slot="header">
        <span>站点基本信息</span>
      </div>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="站点编号">
          {{ stationInfo.stationId }}
        </el-descriptions-item>
        <el-descriptions-item label="站点名称">
          {{ stationInfo.stationName }}
        </el-descriptions-item>
        <el-descriptions-item label="站点地址">
          {{ stationInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ stationInfo.phone }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'StationManagement',
  data() {
    return {
      menuItems: [
        { title: '废品管理', icon: 'el-icon-delete', path: '/station/material' },
        { title: '站点管理', icon: 'el-icon-office-building', path: '/station/management' },
        { title: '公告通知', icon: 'el-icon-bell', path: '/station/announcement' },
        { title: '订单管理', icon: 'el-icon-s-order', path: '/station/orders' },
        { title: '站点订单', icon: 'el-icon-document', path: '/station/my-orders' }
      ],
      stationInfo: {
        stationId: '',
        stationName: '',
        address: '',
        phone: ''
      }
    }
  },
  created() {
    this.getStationInfo()
  },
  methods: {
    handleNavigation(path) {
      this.$router.push(path)
    },
    async getStationInfo() {
      try {
        const stationId = localStorage.getItem('stationId')
        if (!stationId) {
          this.$message.error('未获取到站点信息')
          return
        }
        
        const response = await this.$http.get(`/platform/station/info/${stationId}`)
        if (response.data.code === 200) {
          this.stationInfo = response.data.data
        } else {
          this.$message.error(response.data.message || '获取站点信息失败')
        }
      } catch (error) {
        console.error('获取站点信息失败:', error)
        this.$message.error('获取站点信息失败')
      }
    }
  }
}
</script>

<style scoped>
.station-overview {
  padding: 20px;
}

.card-row {
  margin-bottom: 20px;
}

.menu-card {
  cursor: pointer;
  transition: all 0.3s;
}

.menu-card:hover {
  transform: translateY(-5px);
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.card-content i {
  font-size: 32px;
  margin-bottom: 10px;
  color: #409EFF;
}

.card-content span {
  font-size: 16px;
  color: #303133;
}

.station-info {
  margin-top: 20px;
}

.station-info :deep(.el-descriptions-item__label) {
  width: 120px;
  background-color: #f5f7fa;
}

h2 {
  margin-bottom: 20px;
  font-weight: 500;
  color: #303133;
}
</style>